<template>
  <view class="app-container">
    <!--  今日统计  -->
    <view class="today-box ver-layout-center">
      <view class=" hor-layout-center">
        <view class="statistics-title-line"/>
        <view class="statistics-title">今日统计</view>
        <view class="statistics-title-line"/>
      </view>
      <view class="statistics-layout hor-layout-center">
        <view class="statistics-item ver-layout-center">
          <view class="num">{{ homeData.TotalPayPrice }}</view>
          <view class="text">收入</view>
        </view>
        <view class="statistics-item ver-layout-center">
          <view class="num">{{ homeData.TotalDisburse }}</view>
          <view class="text">支出</view>
        </view>
      </view>
    </view>
    <!--    -->
    <view class="account-layout hor-layout-center">
      <view class="account-item ver-layout-center">
        <view class="num">{{ homeData.TeacherTotal }}</view>
        <view class="title">教师账号总数</view>
      </view>
      <view class="account-item ver-layout-center">
        <view class="num">{{ homeData.StudentTotal }}</view>
        <view class="title">学生账号总数</view>
      </view>
    </view>
    <!--  报表功能列表  -->
    <view class="statistics-box">
      <view class="flex-grid-layout">
        <view v-for="(item,index) in statisticsList" :key="index" class="statistics-box-item ver-layout-center"
              @click="toPageDetail(item)">
          <image class="statistics-box-image" :src="item.icon"></image>
          <view class="statistics-box-text">{{ item.title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let ic_statistical_cash = require("@/static/notice/ic_statistical_cash.png"),
    ic_statistical_go_lesson = require("@/static/notice/ic_statistical_go_lesson.png"),
    ic_statistical_order = require("@/static/notice/ic_statistical_order.png"),
    ic_statistical_student_enrol = require("@/static/notice/ic_statistical_student_enrol.png"),
    ic_statistical_student_increase = require("@/static/notice/ic_statistical_student_increase.png"),
    ic_statistical_teach = require("@/static/notice/ic_statistical_teach.png")
import router from "@/router.js"
import {StatisticsHomeApi} from "@/api/statistics.js"

let engine = new StatisticsHomeApi()
export default {
  name: "notice",
  data() {
    return {
      statisticsList: [
        {icon: ic_statistical_order, title: '订单统计', action: router.orderStatistics},
        {icon: ic_statistical_cash, title: '出纳统计'},
        {icon: ic_statistical_teach, title: '教学收入'},
        {icon: ic_statistical_student_enrol, title: '招生统计'},
        {icon: ic_statistical_go_lesson, title: '上课统计'},
        {icon: ic_statistical_student_increase, title: '学生增长统计'},
      ],
      homeData: {}
    }
  },
  onLoad() {
    this.getStatisticsHome()
  },
  methods: {
    getStatisticsHome() {
      engine.getStatisticsHome().then(res => {
        this.homeData = res.data
      })
    },
    toPageDetail(item) {
      this.$u.route({url: item.action})
    }
  }
}
</script>

<style>
page {
  background: #EFEFEF;
}

.today-box {
  padding-top: 34px;
  padding-bottom: 40px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 6px;
}

.statistics-title {
  margin: 0px 10px;
  font-size: 16px;
  line-height: 16px;
  color: #333333;
}

.statistics-title-line {
  width: 50px;
  height: 1px;
  background: #F4F3F3;
  border-radius: 1px;
}

.statistics-layout {
  width: 100%;
  margin-top: 38px;
}

.statistics-item {
  flex: 1;
}

.statistics-item > .num {
  font-size: 29px;
  line-height: 29px;
  color: #42B4AB;
}

.statistics-item > .text {
  margin-top: 11px;
  font-size: 14px;
  line-height: 14px;
  color: #333333;
}

.account-layout {
  width: 100%;
  padding-top: 29px;
  padding-bottom: 32px;
}

.account-item {
  flex: 1;
}

.account-item > .num {
  font-size: 20px;
  line-height: 20px;
  color: #333333;
}

.account-item > .title {
  margin-top: 14px;
  font-size: 14px;
  line-height: 14px;
  color: #333333;
}

.statistics-box {
  background: #FFFFFF;
  border-radius: 6px;
  min-height: 250px;
}

.statistics-box-item {
  margin-top: 30px;
  width: calc(100% / 4);
}

.statistics-box-image {
  width: 40px;
  height: 40px;
}

.statistics-box-text {
  margin-top: 9px;
  font-size: 12px;
  color: #333333;
}
</style>
